<template>
  <!-- 课程目录 -->
  <div class="courseOutline bg-fff">
    <p class="courseOutline-title">课程目录</p>
    <div class="courseOutline-box">
      <div
        class="courseOutline-list w-100"
        v-for="(item, index) in data"
        :key="index"
      >
        <div class="display-flex flex-between">
          <div>
            <img class="icon-size-24" src="@/assets/images/ic_date.png" />
            <span
              class="margin-left-10 vertical-align-middle courseOutline-time"
              >{{ item.name }}</span
            >
          </div>
          <div
            class="icon-size-24"
            :class="selectContents.includes(index) ? 'item-up' : 'item-down'"
            @click="handleDown(index)"
          ></div>
        </div>
        <!-- 列表 -->
        <div v-if="selectContents.includes(index)">
          <div
            class="item-list display-flex flex-between"
            v-for="(item1, index1) in item.arr"
            :key="index1"
          >
            <div class="item-list-name">{{ item1.titles }}</div>
            <div class="item-list-teacher">
              <img
                class="icon-size-20 margin-right-8 vertical-align-middle"
                src="@/assets/images/ic_teacher.png"
                style="margin-left: 24px"
              />
              <span>{{ item1.ghNames }}</span>
            </div>
            <div class="item-list-tool font-size-14">
              <span
                class="detailOverview text-center cursor-pointer"
                @click="openSummary(item1)"
              >
                <img
                  class="icon-size-20"
                  src="@/assets/images/ic_overview.png"
                />
                <span class="margin-left-6 vertical-align-middle">概览</span>
              </span>
              <span
                class="courseware margin-left-10 text-center cursor-pointer"
                @click="kjadd(item1)"
              >
                <img class="icon-size-20" src="@/assets/images/ic_ppt.png" />
                <span class="margin-left-6 vertical-align-middle">课件</span>
              </span>
              <span
                class="play margin-left-10 text-center cursor-pointer"
                @click="handleVideo(item1)"
              >
                <img class="icon-size-20" src="@/assets/images/ic_play.png" />
                <span class="margin-left-6 vertical-align-middle color-fff"
                  >播放</span
                >
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 概览弹层 -->
    <summaryDialog
      :isDialog="showDialog"
      @closeDialog="closeDialog"
      :summaryDetail="summaryDetail"
    ></summaryDialog>
    <!-- 课件ppt弹窗 -->
    <el-dialog v-model="pptDialog" :show-close="false" class="pptDialog bg-fff">
      <template #header>
        <div
          class="dialogHeader font-size-18 font-weight-600 color-00085 display-flex flex-between"
        >
          <div>PPT预览</div>
          <img
            class="dialogClose cursor-pointer"
            src="@/assets/images/dialogClose.png"
            alt=""
            @click="handleClose"
          />
        </div>
      </template>
      <div class="ppt-box">
        <div
          class="pptList w-100"
          v-for="(item, index) in pptList"
          :key="index"
        >
          <img class="w-100 h-100" :src="item.url" alt="" />
          <div class="num text-center color-fff">{{ index + 1 }}</div>
          <div class="time text-center color-fff">
            {{ convertTimes(item.timestamp) }}
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { convertTimes } from '@/utils/crypto'
import summaryDialog from './summaryDialog.vue'
import { getContentSum } from '@/services/recordedBroadcast'
import { getPpt } from '@/services/liveBroadcast'
const props = defineProps<{
  data?: Array<any>
}>()

// 选中的目录
const selectContents: any = ref([])
const pptList: any = ref([])
const pptDialog = ref(false)
const handleClose = () => {
  pptDialog.value = false
}
//课件
const kjadd = async (val: any) => {
  pptDialog.value = true
  const pptRes = await getPpt(val.classRoomNo, val.viewDate, val.classSeq)
  // const pptRes = await getPpt('101100104X', '2025-01-20', 1)
  pptList.value = pptRes.data
}

const showDialog = ref(false)
const closeDialog = () => {
  showDialog.value = false
}
const summaryDetail = reactive({
  studyTime: '',
  title: '',
  memo: ''
}) // 总结弹窗

// 打开内容总结弹窗
const openSummary = async (val: any) => {
  //循环
  showDialog.value = true
  const viewDate = val.viewDate
  const classSeq = val.classSeq
  const classRoomNo = val.classRoomNo
  const knowledgeLevel = 2
  const summaryRes: any = await getContentSum(
    viewDate,
    classSeq,
    classRoomNo,
    knowledgeLevel
  )
  summaryDetail.studyTime = val.xueshi
  summaryDetail.title = summaryRes.rows[0]?.title
  summaryDetail.memo = summaryRes.rows[0]?.memo
}

onMounted(() => {})
const router = useRouter()
// 目录
const handleDown = (index: any) => {
  if (selectContents.value.includes(index)) {
    // 如果当前项已展开，则收起
    selectContents.value = selectContents.value.filter((i: any) => i !== index)
  } else {
    // 否则展开当前项
    selectContents.value.push(index)
  }
}
const handleVideo = (val: any) => {
  const route = router.resolve({
    path: '/courseDetail',
    query: { id: val.id }
  }) // 解析路由路径
  window.open(route.href, '_blank') // 在新窗口打开
}
</script>

<style lang="scss" scoped>
// 课程目录
.courseOutline {
  padding: 64px;
  box-sizing: border-box;
  border-radius: 12px;
  margin-top: 24px;
  .courseOutline-title {
    display: inline-block;
    font-family:
      Alimama ShuHeiTi,
      Alimama ShuHeiTi;
    font-weight: bold;
    font-size: 24px;
    color: #18191a;
    line-height: 30px;
    border-bottom: 2px solid #0f63ed;
    margin-bottom: 40px;
  }
  .courseOutline-list {
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #e9e9e9;
    padding: 26px 32px 26px 24px;
    margin-bottom: 24px;
    .courseOutline-time {
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 600;
      font-size: 18px;
      color: #18191a;
    }
    .item-list {
      height: 64px;
      padding: 16px;
      box-sizing: border-box;
      border-bottom: 1px solid #e9e9e9;
      .item-list-name {
        width: 56%;
        white-space: nowrap; /* 禁止换行 */
        overflow: hidden; /* 隐藏溢出内容 */
        text-overflow: ellipsis;
      }
      .item-list-teacher {
        width: 22%;
      }
      .item-list-tool {
        width: 22%;
      }
    }
    .item-down {
      background-image: url('@/assets/images/ic_down.png');
      background-repeat: no-repeat;
      background-size: 100%;
    }
    .item-down:hover {
      background-image: url('@/assets/images/ic_down_hover.png');
    }
    .item-up {
      background-image: url('@/assets/images/ic_up.png');
      background-repeat: no-repeat;
      background-size: 100%;
    }
    .item-up:hover {
      background-image: url('@/assets/images/ic_up_hover.png');
    }
    .detailOverview {
      display: inline-block;
      width: 82px;
      height: 32px;
      line-height: 29px;
      border-radius: 16px;
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 500;
      color: #5f49e5;
      border: 1px solid #5f49e5;
    }
    .courseware {
      display: inline-block;
      width: 82px;
      height: 32px;
      line-height: 29px;
      color: #0f63ed;
      border-radius: 16px;
      border: 1px solid #0f63ed;
    }
    .play {
      display: inline-block;
      width: 82px;
      height: 32px;
      line-height: 29px;
      background: #0f63ed;
      border-radius: 16px;
    }
  }
}

// 弹窗
:deep(.pptDialog) {
  width: 35%;
  border-radius: 8px;
  margin-top: 80px;
  .ppt-box {
    height: 68vh;
    overflow-y: scroll;
    .pptList {
      height: 324px;
      box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, 0.1);
      border-radius: 6px;
      border: 1px solid #4c8bf3;
      margin-bottom: 16px;
      position: relative;
      .num {
        width: 36px;
        height: 36px;
        line-height: 36px;
        position: absolute;
        top: 0px;
        left: 0px;
        border-radius: 5px 0px 0px 0px;
        background: rgba(0, 0, 0, 0.5);
      }
      .time {
        width: 108px;
        height: 36px;
        line-height: 36px;
        position: absolute;
        bottom: 0px;
        left: 0px;
        border-radius: 0px 0px 0px 5px;
        background: rgba(0, 0, 0, 0.5);
      }
    }
    .pptList:last-child {
      margin-bottom: 0px;
    }
  }
}
:deep(.pptDialog .el-dialog__header) {
  padding: 0px;
  box-sizing: border-box;
}
:deep(.pptDialog .el-dialog__body) {
  padding: 20px 12px 0px;
  box-sizing: border-box;
}
</style>
